import React, { Component } from 'react';
import { connect } from 'react-redux';
import { Layout, Form, Input, Button, Select } from 'antd';
import { openNotification } from '../Notification';
import { UserOutlined, LockOutlined } from '@ant-design/icons';


const layout = {
    labelCol: { span: 5 },

};
const tailLayout = {
    wrapperCol: { offset: 5 },
};

const Demo = (props) => {
    const onFinish = values => {
        props.item(values);
    };

    const onFinishFailed = errorInfo => {
        console.log('Failed:', errorInfo);
    };

    const { Option } = Select;
    return (
        <Form
            {...layout}
            name="basic"
            initialValues={{ remember: true }}
            onFinish={onFinish}
            onFinishFailed={onFinishFailed}
            className='sign_form'
        >
            <div className='form_title'>登录</div>
            <Form.Item label='登录类型' name='select_name'>
                <Select defaultValue="请选择用户类型" style={{ width: '100%' }} >
                    <Option value="1">管理员</Option>
                </Select>
            </Form.Item>
            <Form.Item
                label="账号"
                name="username"
                rules={[{ required: true, message: '账号不能为空!' }]}
                
            >
                <Input prefix={<UserOutlined className="site-form-item-icon" />}/>
            </Form.Item>

            <Form.Item
                label="密码"
                name="password"
                rules={[{ required: true, message: '密码不能为空!' }]}
            >
                <Input.Password   prefix={<LockOutlined className="site-form-item-icon" />}/>
            </Form.Item>

            <Form.Item {...tailLayout}>
                <Button type="primary" htmlType="submit">
                    登录
          </Button>
            </Form.Item>
        </Form>
    );
};
class index extends React.Component {
    constructor() {
        super();
    }
    componentWillMount(){
        if(sessionStorage.getItem('user_key')||sessionStorage.getItem('admin_key')){
          return  sessionStorage.removeItem('user_key')||sessionStorage.removeItem('admin_key')
        }
    }
    render() {
        const { Header, Footer, Sider, Content } = Layout;
        return <Layout className='sign_layout'>
            <Header className='sign_header'>
                <div />
            </Header>
            <Content className='sign_content'>
                <Demo item={(val) => this.handelSign(val)} />
            </Content>
            <Footer className='sign_footer'>
                Copyright©2017 版权所有 中国航天科工集团公司 备案序号:京ICP备05067351号
                制作单位：中国航天科工集团
                地址：北京市丰台区云岗北区西里1号　邮编：100074
            </Footer>
        </Layout>
    };
    handelSign = (e) => {

        let sign_list = {
            loginTypeSelect: e.select_name,
            lname: e.username,
            pwd: e.password
        }

        this.$axios.post('/page/login_by_json', this.$qs.stringify(sign_list)).then((res) => {

          if (res.status === 1 && res.user.usertype === 1 || res.user.usertype === 0) {
                this.props.history.push('/admin')
                sessionStorage.setItem('admin_key',res.user.code);
            }
        }).catch((err) => {
            openNotification('密码或账号输入错误,请重新输入!')
        })
    }
}

export default connect()(index);